import React, { useEffect, useMemo } from 'react';
import { Table, Button, Switch, Row, Divider , Space, Tag, Select} from 'antd';
import {
  PlusOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  CloseCircleOutlined,
  ExclamationCircleOutlined,
  MinusCircleOutlined,
  SyncOutlined,
} from '@ant-design/icons';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';

import Store from './store';
import NewModal from './newModal';
import SearchForm from './SearchForm';
import './style.less';

const FormDemoPage = () => {
  const pageStore = React.useContext(Store);
  // console.log(pageStore);
  // 页面加载获取数据
  useEffect(() => {
    pageStore.qryTableDate();
  }, []);

  const columns = useMemo(
    () => [
      {
        title: '项目名称',
        dataIndex: 'projectName',
        ellipsis: true,
      },
      {
        title: 'jar包地址',
        dataIndex: 'projectPath',
        ellipsis: true,
      },
      {
        title: '版本号',
        dataIndex: 'version',
        width: 185,
      },
    ],
    [pageStore],
  );

  return (
    <div className="page-form-demo page-content">
      <Divider dashed />
      <Tag icon={<CheckCircleOutlined />} color="success">
        可执行项目列表
      </Tag>

      <Button type="primary" style={{ marginLeft:20 }} onClick={() => pageStore.excute(record.id)}>
        开始执行
      </Button>

      <Table
        style={{ paddingTop: '20px' }}
        loading={pageStore.loading}
        columns={columns}
        dataSource={toJS(pageStore.tableData)}
        rowKey="id"
        pagination={toJS(pageStore.pagination)}
      />
      <NewModal />
    </div>
  );
};

export default observer(FormDemoPage);
